﻿@using LiUTrading.MvcHelpers
@model LiUTrading.Helpers.PaginatedList<LiUTrading.Models.Ad>
@{
    ViewBag.Title = "Index";
}
@if (Request.IsAuthenticated)
{
    <div class="right">
        @Html.DialogFormLink("Create New Ad", Url.Action("Create"), "CreateNewAd", "Create New Ad", "adscontent", Url.Action("Index"))
    </div>
}

<p>Click on each ad to show detailed information</p>
<table id="adTable">
    <thead>
        <tr>
            <th>
                Ad Id
            </th>
            <th>
                Time added
            </th>
            <th>
                Title
            </th>
            <th>
                Category
            </th>
            <th>
                Price
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>
                Ad Id
            </th>
            <th>
                DateTime
            </th>
            <th>
                Title
            </th>
            <th>
                Category
            </th>
            <th>
                Price
            </th>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var oAdId;
$(document).ready(function(){
var oTable = $('#adTable').dataTable({
    "bProcession":true,
    "sAjaxSource":"@Url.Content("~/Ads/getjson")",
    "bServerSide":true,
    "aoColumns":[
        {"bVisible": false},
        {"sName":"datetime"},
        {"sName":"title"},
        {"sName":"category"},
        {"sName":"price"},
    ]});
  
    $("#adTable tbody").delegate("tr","click",function(){
    var iPos = oTable.fnGetPosition(this);

    oAdId = oTable.fnGetData(iPos)[0];
    $('#dialog-ad').dialog('open');
    });
});

    $(function () {
        $('#dialog-ad').dialog({
            autoOpen: false,
            width: 600,

            resizable: false,
            title:'Details',
            modal: true,
            
            open: function (event, ui) {
                //Load the DetailsPartial action which will return 
                // the partial view Details
                $(this).load('@Url.Action("Details", "Ads")', { id: oAdId });
              
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                    return false;
                }
            }
        });
         
        $('.addetails').click(function () {
            oAdId = $(this).attr('data-addetailsid');
            $('#dialog-ad').dialog('open');
            $('#dialog-ad').dialog("option", "position", "top");
            return false;
        });
        
    });
</script>
<div id="dialog-ad" style="overflow: hidden;">
</div>
